<template>
  <div v-loading="loading">
    <!-- :rules="rules" -->
      <el-card class="box-card">
        <el-row>
          <el-col :span="2">
            <div
              style="width: 100px; height: 100px; border: 1px solid white; background-color: cornflowerblue; text-align: center; position: fixed;">
              <span style="color: white; line-height: 100px">基本信息填写</span>
            </div>
            <div
              style=" width: 100px; height: 100px; border: 1px solid white;background-color: cornflowerblue; text-align: center; margin-top: 100px; position: fixed;">
              <span style="color: white; line-height: 100px">经费预算</span>
            </div>
            <div
              style=" width: 100px; height: 100px; border: 1px solid white; background-color: cornflowerblue; text-align: center; margin-top: 200px; position: fixed;">
              <span style="color: white; line-height: 100px">审核</span>
            </div>
          </el-col>
          <el-col :span="22">
            <div>
              <span
                style=" color: cornflowerblue; font-size: 20px; line-height: 50px;">基本信息</span>
              <el-divider></el-divider>
              <el-row>
                <!-- <p v-if="numFlag=='projectName'" style="color:red;line-height: 10px;height: 10px;"><span style="font-size: 13px;">{{ ps }}</span></p> -->
                <el-col :span="3">项目名称（中文）：</el-col>
                <el-col :span="21">
                  {{ProjectInfo.projectName}}
                </el-col>
              </el-row>
              <br />
              <el-row>
                <el-col :span="12">
                  <el-row>
                    <el-col :span="6">项目编号：</el-col>
                    <el-col :span="18">
                      {{ProjectInfo.projectNumber}}
                    </el-col>
                  </el-row>
                </el-col>
                <el-col :span="12"> </el-col>
              </el-row>
              <br />
              <el-row>
                <el-col :span="12">
                  <el-row>
                    <el-col :span="6">成果所属部门：</el-col>
                    <el-col :span="18">
                      <!-- <el-autocomplete v-model="Info.projectDepartresult" class="ipt" style="width: 30%"
                        :fetch-suggestions="querySearchAsync" placeholder=""></el-autocomplete> -->
                      {{ProjectInfo.projectDepartresult}}
                      <!-- <el-input v-model="Info.projectDepartresult" class="ipt" style="width: 30%;" /><i class="el-icon-search"></i> -->
                    </el-col>
                  </el-row>
                </el-col>
                <el-col :span="12">
                  <el-row>
                    <el-col :span="6">负责人：</el-col>
                    <el-col :span="18">
                      {{ProjectInfo.projectPerson}}
                    </el-col>
                  </el-row>
                </el-col>
              </el-row>
              <br />
              <el-row>
                <el-col :span="12">
                  <el-row>
                    <el-col :span="6">负责人所属部门：</el-col>
                    <el-col :span="18">
                      {{ProjectInfo.projectDepartperson}}
                    </el-col>
                  </el-row>
                </el-col>
                <el-col :span="12">
                  <el-row>
                    <el-col :span="6">科研秘书：</el-col>
                    <el-col :span="18">
                        {{ProjectInfo.projectSecretary}}
                    </el-col>
                  </el-row>
                </el-col>
              </el-row>
              <br />
              <el-row>
                <el-col :span="12">
                  <el-row>
                    <el-col :span="6">科研秘书联系方式：</el-col>
                    <el-col :span="18">
                        {{ProjectInfo.secretaryPhone}}
                    </el-col>
                  </el-row>
                </el-col>
                <el-col :span="12">
                  <el-row>
                    <el-col :span="6">负责人类型：</el-col>
                    <el-col :span="18">
                        {{ProjectInfo.projectPersontype}}
                    </el-col>
                  </el-row>
                </el-col>
              </el-row>
              <br />
              <el-row>
                <el-col :span="12">
                  <el-row>
                    <el-col :span="6">立项年度：</el-col>
                    <el-col :span="18">
                        {{ProjectInfo.projectYear}}
                    </el-col>
                  </el-row>
                </el-col>
                <el-col :span="12">
                  <el-row>
                    <el-col :span="6">登记时间：</el-col>
                    <el-col :span="18">
                        {{ProjectInfo.projectWritetime}}
                    </el-col>
                  </el-row>
                </el-col>
              </el-row>
              <br />
              <el-row>
                <el-col :span="12">
                  <el-row>
                    <el-col :span="6">登记人：</el-col>
                    <el-col :span="18">
                      {{ProjectInfo.projectWriteperson}}
                    </el-col>
                  </el-row>
                </el-col>
                <el-col :span="12">
                  <el-row>
                    <el-col :span="6">项目经费（万元）：</el-col>
                    <el-col :span="18">
                      {{ProjectInfo.projectMoney}}
                    </el-col>
                  </el-row>
                </el-col>
              </el-row>
              <br />
              <el-row>
                <el-col :span="12">
                  <el-row>
                    <el-col :span="6">专项经费（万元）：</el-col>
                    <el-col :span="18">
                      {{ProjectInfo.specialMoney}}
                    </el-col>
                  </el-row>
                </el-col>
                <el-col :span="12">
                  <el-row>
                    <el-col :span="6">配套经费（万元）：</el-col>
                    <el-col :span="18">
                      {{ProjectInfo.supportMoney}}
                    </el-col>
                  </el-row>
                </el-col>
              </el-row>
              <br />
              <el-row>
                <el-col :span="12">
                  <el-row>
                    <el-col :span="6">学科门类：</el-col>
                    <el-col :span="18">
                      {{ProjectInfo.projectSubject}}
                    </el-col>
                  </el-row>
                </el-col>
                <el-col :span="12">
                  <el-row>
                    <el-col :span="6">项目开始时间：</el-col>
                    <el-col :span="18">
                      {{ProjectInfo.projectStarttime}}
                    </el-col>
                  </el-row>
                </el-col>
              </el-row>
              <br />
              <el-row>
                <el-col :span="12">
                  <el-row>
                    <el-col :span="6">结束时间：</el-col>
                    <el-col :span="18">
                      {{ProjectInfo.projectEndtime}}
                    </el-col>
                  </el-row>
                </el-col>
                <el-col :span="12">
                  <el-row>
                    <el-col :span="6">研究类型：</el-col>
                    <el-col :span="18">
                      {{ProjectInfo.projectStudytype}}
                    </el-col>
                  </el-row>
                </el-col>
              </el-row>
              <br />
              <el-row>
                <el-col :span="12">
                  <el-row>
                    <el-col :span="6">项目类型：</el-col>
                    <el-col :span="18">
                      {{ProjectInfo.projectType}}
                    </el-col>
                  </el-row>
                </el-col>
                <el-col :span="12">
                  <el-row>
                    <el-col :span="6">项目级别：</el-col>
                    <el-col :span="18">
                      {{ProjectInfo.projectLevel}}
                    </el-col>
                  </el-row>
                </el-col>
              </el-row>
              <br />
              <el-row>
                <el-col :span="12">
                  <el-row>
                    <el-col :span="6">项目来源单位编号：</el-col>
                    <el-col :span="18">
                      {{ProjectInfo.projectScoreunit}}
                      <!-- <el-input v-model="Info.projectScoreunit" class="ipt" style="width: 30%" /><i
                        class="el-icon-search"></i> -->
                    </el-col>
                  </el-row>
                </el-col>
                <el-col :span="12">
                  <el-row>
                    <el-col :span="6">项目类别编号：</el-col>
                    <el-col :span="18">
                      {{ProjectInfo.projectKind}}
                      <!-- <el-input v-model="Info.projectKind" class="ipt" style="width: 30%" /><i
                        class="el-icon-search"></i> -->
                    </el-col>
                  </el-row>
                </el-col>
              </el-row>
              <br />
              <br />
              <el-row>
                <el-col :span="12">
                  <el-row>
                    <el-col :span="6">项目承担单位：</el-col>
                    <el-col :span="18">
                      {{ProjectInfo.projectUndertakeunit}}
                      <!-- <el-input v-model="Info.projectUndertakeunit" class="ipt"
                        style="width: 30%" /> -->
                    </el-col>
                  </el-row>
                </el-col>
                <el-col :span="12"> </el-col>
              </el-row>
              <br />
              <br />
              <el-row>
                <el-col :span="12">
                  <el-row>
                    <el-col :span="10">是否委托外单位进行测试或测试加工：</el-col>
                    <span v-if="ProjectInfo.projectEntrust">是</span>
                    <span v-else>否</span>
                  </el-row>
                </el-col>
                <el-col :span="12"> </el-col>
              </el-row>
              <br />
              <el-row>
                <el-col :span="12">
                  <el-row>
                    <el-col :span="6">
                      详细信息：
                    </el-col>
                    <el-col :span="6">
                      {{ProjectInfo.projectRemark}}
                    </el-col>
                  </el-row>
                </el-col>
                <el-col :span="12"> </el-col>
              </el-row>
              <br />
              <div>
            <el-row>
                <el-col :span="12">
                  <el-row>
                    <el-col :span="6">是否涉及人体：</el-col>
                    <span v-if="ProjectInfo.touchPerson">是</span>
                    <span v-else>否</span>
                  </el-row>
                </el-col>
                <el-col :span="12"> </el-col>
              </el-row>
              <br />
              <el-row>
                <el-col :span="12">
                  <el-row>
                    <el-col :span="6">
                     详细信息：
                    </el-col>
                    <el-col :span="6">
                      {{ProjectInfo.personRemark}}
                    </el-col>
                  </el-row>
                </el-col>
                <el-col :span="12"> </el-col>
              </el-row>
        </div>
            </div>
          </el-col>
        </el-row>
        <br />
      </el-card>
    <br />
    <el-card class="box-card">
        
        <br />
    <el-card class="box-card">
      <div>
        <el-row>
          <el-col :span="2"> &nbsp; </el-col>
          <el-col :span="22">
            <span style="color: cornflowerblue; font-size: 20px; line-height: 50px">经费预算</span>
            <el-divider></el-divider>
            <el-row>
              <el-col :span="12">
                <el-row>
                  <el-col :span="6">预算模板：</el-col>
                  <el-col :span="18">
                   {{ProjectInfo.templateId}}
                  </el-col>
                </el-row>
              </el-col>
              <el-col :span="12">
                <el-row>
                  <el-col :span="6">是否包含配经费：</el-col>
                  <el-col :span="18">
                    
                    <!-- <el-radio v-model="Isdisable"  :label=true>是</el-radio>
                    <el-radio v-model="Isdisable" @click="IncludingAccessories()" :label=false>否</el-radio> -->
                  </el-col>
                </el-row>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-table
                  :data="ProjectInfo.plateItem">

                  <el-table-column prop="budgetitemName" label="预算科目"></el-table-column>
                  <el-table-column prop="budgetType" label="科目类型"></el-table-column>
                  <el-table-column prop="directFunding" :label="'专项经费（'+ProjectInfo.funsRatioName+')'"></el-table-column>
                  <el-table-column prop="overheadFunding" :label="'配套经费（'+ProjectInfo.funsRatioName+')'"></el-table-column>
                  
                </el-table>
              </el-col>
            </el-row>
            <br />
          </el-col>
        </el-row>
      </div>
      <br />
      
      <div>
        <el-row>
          <el-col :span="2"> &nbsp; </el-col>
          <el-col :span="22">
            <span style="color: cornflowerblue; font-size: 20px; line-height: 50px">审核</span>
            <el-divider></el-divider>
            <el-row>
              <el-col :span="24">
                <el-row>
                  <el-col :span="24">
                   <el-steps :active="active" finish-status="success">
                      <el-step v-for="(item,index) in StepTable" :key="index" :title=item.stepName>{{1}}</el-step>
                    </el-steps>
                  </el-col>
                </el-row>
                <br>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-table
                  :data="WorkStepInfo">
                  <el-table-column prop="stepName" label="流程名称"></el-table-column>
                  <el-table-column prop="auditor" label="审核人"></el-table-column>
                  <el-table-column prop="remark" label="审核说明"></el-table-column>
                  <el-table-column prop="auditDate" label="审核时间"></el-table-column>
                  <el-table-column prop="auditStatus" label="审核状态">
                    <template v-slot="slot">
                        <span v-if="slot.row.auditStatus==1">审核成功</span>
                        <span v-if="slot.row.auditStatus==2">审核失败</span>
                    </template>
                  </el-table-column>
                  
                </el-table>
              </el-col>
            </el-row>
            <br />
          </el-col>
        </el-row>
      </div>
    </el-card>
    <br />
      
    </el-card>
    <br />
    <div style="width: 100%; text-align: center">
      <el-button type="primary" @click="go()">返回</el-button>
    </div>
    <br />
    &nbsp;
  </div>
</template>
<script>
import { id } from 'element-plus/es/locale';
//import { json } from 'body-parser';
export default {
  data() {
    return {
      //direct:"专项经费（"+ProjectInfo.funsRatioName+")",
      active: this.$route.query.orderId-1,
      ps: "",
      projectScoreunitOptions: [],
      projectSubjectOptions: [],         //学科门类
      projectStudytypeOptions: [],       //研究类型
      projectUndertakeunitOptions: [],   //项目承担单位
      projectTypeOptions: [],            //项目类型
      restaurants: [],
      restaurants1: [],
      projectKindOptions: [],
      state: "",
      timeout: null,
      loading: false,
      visible: false,
      Isdisable: true,
      StartTime: new Date(),
      count1: 10,
      DepartList: [],
      BudgetTemplate: "",
      values: "",
      fundingsubject: [],
      projectType: '',
      projectDepartresult:'',
      Info: {
        projectName: "", //项目名称(中文)
        projectNumber: "", //项目编号
        projectDepartresult: "", //成果归属部门
        projectDepartperson: "", //负责人所属部门
        secretaryPhone: "", //科研秘书联系方式
        projectYear: 0, //立项年度
        projectWriteperson: JSON.parse(localStorage.getItem("user")).userName, //登记人
        specialMoney: 0, //专项经费(万元)
        projectSubject: "", //学科门类
        projectEndtime: '', //结束时间
        projectType: "", //项目类型
        projectScoreunit: "", //项目来源单位
        projectUndertakeunit: "", //项目承担单位
        projectEntrust: false, //是否委托外单位进行测试或测试加工
        projectRemark: "", //备注
        touchPerson: false, //是否涉及人体
        personRemark: "", //人体补充
        projectPerson: "", //负责人
        projectSecretary: "", //科研秘书(负责成果、经费)
        projectPersontype: "", //负责人类型
        projectWritetime: new Date(),//, //登记时间
        projectMoney: 0, //项目经费 (万元)
        supportMoney: 0, //配套经费(万元)
        projectStarttime: '', //项目开始时间
        projectStudytype: "", //研究类型
        projectLevel: "", //项目级别
        projectKind: "", //项目类别
        isDel: 0,
        isTs: true,
        data: [
          {
            templateId: "",
            subjectId: "",
            projectId: "",
            directFunding: 0,
            overheadFunding: 0
          }
        ],
        file:[]

        //data:[],
      },
      projectLevelOptions: [],
      LevelOptions: [],
      options: [],
      Fundtemplate_ItemList: [],
      Fundtemplate_ItemListZ: [
        {
          templateId: "", //经费模板Id
          subjectId: "", //经费科目Id
          projectId: "", //项目Id
          directFunding: 0, //专项经费
          overheadFunding: 0, //配套经费
        },
      ],
      Fundtemplate_ItemListJ: [
        {
          templateId: "", //经费模板Id
          subjectId: "", //经费科目Id
          projectId: "", //项目Id
          directFunding: 0, //专项经费
          overheadFunding: 0, //配套经费
        },
      ],
      projectPersontypeOptions: [],      //负责人类型
      indirectCosts: [],
      getPageData: {
        page: 0,
        rows: 0,
        total: 0,
        tableName: "",
        sort: "",
        order: "",
        wheres: "",
        export: true,
      },
      ProjectInfo:{},
      StepTable:[],
      WorkStepInfo:[],
      inputDto:{
        projectId:"",
        Outcome:"true",
        remark:"",
        orderId:""
      }
    };
  },
  created() {
    this.Show();
    this.GetStepList();
    
  },

  methods: {
    Show()
    {
        this.loading=true;
        let ids = this.$route.query.id;  
        this.http.get('api/tb_project_baseinfo/BaseinfoSearch?projectId='+ids).then(
            (res)=>{
                this.ProjectInfo = res.data[0]
                console.log(res.data);
                this.loading=false;
            }
        ) 
        this.GetWorkStepInfo();
    },
    GetStepList(){
      let ids = this.$route.query.id;  
        this.http.get('api/tb_project_workflowstep/GetWorkFlowStep?projectId='+ids).then(
            (res)=>{

                this.StepTable = res.result.data
                console.log(res,"ss");
            }
        ) 
    },
    go(){
      this.$router.push('/ProjectList')
    },
      GetWorkStepInfo(){
        let ids = this.$route.query.id;  
       this.http.get('api/tb_project_workflowstep/GetWorkStepInfo?projectId='+ids).then(
            (res)=>{
                this.WorkStepInfo = res.result.data
                console.log(res.result,"sss");
            }
        ) 
      }
  },
};
</script>

<style>
.ipt {
  border: none;
  outline: none;
  height: 30px;
  border-bottom: 1px solid #ccc;
}

.table_style {
  border: 1px solid #ccc;
  height: 50px;
  width: 90%;
  text-align: center;
}

.table_style1 {
  border: 1px solid #ccc;
  height: 50px;
  width: 50px;
  text-align: center;
}

/* .el-input__inner{
    border: none;
    outline: none;
    height: 30px;
    border-bottom: 1px solid #ccc;
} */
/* .el-input /deep/ .el-input__wrapper {
    border: none;
    outline: none;
    height: 30px;
    border-bottom: 1px solid #ccc;
    
}  */
/* .el-input .el-input--default .el-input__wrapper{
    border: none;
} */
.el-input__wrapper {
  display: inline-flex;
  flex-grow: 1;
  align-items: center;
  justify-content: center;
  padding: 1px 11px;
  background-color: var(--el-input-bg-color, var(--el-fill-color-blank));
  background-image: none;
  border-radius: var(--el-input-border-radius, var(--el-border-radius-base));
  transition: var(--el-transition-box-shadow);
  box-shadow: 0 0 0 0px var(--el-input-border-color, var(--el-border-color)) inset;
  border-bottom: 1px solid;
}

.el-form-item.is-error .el-input__wrapper {
  box-shadow: 0 0 0 1px #ffffff inset;
}

.el-input__wrapper.is-focus {
  box-shadow: 0 0 0 1px white inset;
}

.el-input {
  --el-input-text-color: var(--el-text-color-regular);
  --el-input-border: var(--el-border);
  --el-input-hover-border: var(--el-border-color-hover);
  --el-input-focus-border: var(--el-color-primary);
  --el-input-transparent-border: 0 0 0 1px transparent inset;
  --el-input-border-color: var(--el-border-color);
  --el-input-border-radius: var(--el-border-radius-base);
  --el-input-bg-color: var(--el-fill-color-blank);
  --el-input-icon-color: var(--el-text-color-placeholder);
  --el-input-placeholder-color: var(--el-text-color-placeholder);
  --el-input-hover-border-color: #ffffff;
  --el-input-clear-hover-color: var(--el-text-color-secondary);
  --el-input-focus-border-color: var(--el-color-primary);
}

.el-select {
  --el-select-border-color-hover: #ffffff;
  --el-select-disabled-border: var(--el-disabled-border-color);
  --el-select-font-size: var(--el-font-size-base);
  --el-select-close-hover-color: var(--el-text-color-secondary);
  --el-select-input-color: var(--el-text-color-placeholder);
  --el-select-multiple-input-color: var(--el-text-color-regular);
  --el-select-input-focus-border-color: #ffffff;
  --el-select-input-font-size: 14px;
}

.el_Select /deep/ :root {
  color-scheme: light;
  --el-color-white: #ffffff;
  --el-color-black: #000000;
  --el-color-primary: none;
  --el-color-primary-light-3: #79bbff;
  --el-color-primary-light-5: #a0cfff;
  --el-color-primary-light-7: #c6e2ff;
  --el-color-primary-light-8: #d9ecff;
  --el-color-primary-light-9: #ecf5ff;
  --el-color-primary-dark-2: #337ecc;
  --el-color-success: #67c23a;
  --el-color-success-light-3: #95d475;
  --el-color-success-light-5: #b3e19d;
  --el-color-success-light-7: #d1edc4;
  --el-color-success-light-8: #e1f3d8;
  --el-color-success-light-9: #f0f9eb;
  --el-color-success-dark-2: #529b2e;
  --el-color-warning: #e6a23c;
  --el-color-warning-light-3: #eebe77;
  --el-color-warning-light-5: #f3d19e;
  --el-color-warning-light-7: #f8e3c5;
  --el-color-warning-light-8: #faecd8;
  --el-color-warning-light-9: #fdf6ec;
  --el-color-warning-dark-2: #b88230;
  --el-color-danger: #f56c6c;
  --el-color-danger-light-3: #f89898;
  --el-color-danger-light-5: #fab6b6;
  --el-color-danger-light-7: #fcd3d3;
  --el-color-danger-light-8: #fde2e2;
  --el-color-danger-light-9: #fef0f0;
  --el-color-danger-dark-2: #c45656;
  --el-color-error: #f56c6c;
  --el-color-error-light-3: #f89898;
  --el-color-error-light-5: #fab6b6;
  --el-color-error-light-7: #fcd3d3;
  --el-color-error-light-8: #fde2e2;
  --el-color-error-light-9: #fef0f0;
  --el-color-error-dark-2: #c45656;
  --el-color-info: #909399;
  --el-color-info-light-3: #b1b3b8;
  --el-color-info-light-5: #c8c9cc;
  --el-color-info-light-7: #dedfe0;
  --el-color-info-light-8: #e9e9eb;
  --el-color-info-light-9: #f4f4f5;
  --el-color-info-dark-2: #73767a;
  --el-bg-color: #ffffff;
  --el-bg-color-page: #f2f3f5;
  --el-bg-color-overlay: #ffffff;
  --el-text-color-primary: #303133;
  --el-text-color-regular: #606266;
  --el-text-color-secondary: #909399;
  --el-text-color-placeholder: #a8abb2;
  --el-text-color-disabled: #c0c4cc;
  --el-border-color: #dcdfe6;
  --el-border-color-light: #e4e7ed;
  --el-border-color-lighter: #ebeef5;
  --el-border-color-extra-light: #f2f6fc;
  --el-border-color-dark: #d4d7de;
  --el-border-color-darker: #cdd0d6;
  --el-fill-color: #f0f2f5;
  --el-fill-color-light: #f5f7fa;
  --el-fill-color-lighter: #fafafa;
  --el-fill-color-extra-light: #fafcff;
  --el-fill-color-dark: #ebedf0;
  --el-fill-color-darker: #e6e8eb;
  --el-fill-color-blank: #ffffff;
  --el-box-shadow: 0px 12px 32px 4px rgba(0, 0, 0, 0.04), 0px 8px 20px rgba(0, 0, 0, 0.08);
  --el-box-shadow-light: 0px 0px 12px rgba(0, 0, 0, 0.12);
  --el-box-shadow-lighter: 0px 0px 6px rgba(0, 0, 0, 0.12);
  --el-box-shadow-dark: 0px 16px 48px 16px rgba(0, 0, 0, 0.08), 0px 12px 32px rgba(0, 0, 0, 0.12), 0px 8px 16px -8px rgba(0, 0, 0, 0.16);
  --el-disabled-bg-color: var(--el-fill-color-light);
  --el-disabled-text-color: var(--el-text-color-placeholder);
  --el-disabled-border-color: var(--el-border-color-light);
  --el-overlay-color: rgba(0, 0, 0, 0.8);
  --el-overlay-color-light: rgba(0, 0, 0, 0.7);
  --el-overlay-color-lighter: rgba(0, 0, 0, 0.5);
  --el-mask-color: rgba(255, 255, 255, 0.9);
  --el-mask-color-extra-light: rgba(255, 255, 255, 0.3);
  --el-border-width: 1px;
  --el-border-style: solid;
  --el-border-color-hover: var(--el-text-color-disabled);
  --el-border: var(--el-border-width) var(--el-border-style) var(--el-border-color);
  --el-svg-monochrome-grey: var(--el-border-color);
}
</style>
